<template>
	<el-tabs v-model="activeTab" type="border-card" tab-position="bottom">
		<el-tab-pane name="home">
			<template #label>
				<span>
					<el-icon>
						<House />
					</el-icon>
					<span>首页</span>
				</span>
			</template>
			<!-- <div class="tab-content">首页内容</div> -->
			<MainScreen></MainScreen>
		</el-tab-pane>
		<el-tab-pane name="upload">
			<template #label>
				<span>
					<el-icon>
						<Upload />
					</el-icon>
					<span>上传</span>
				</span>
			</template>
			<div class="tab-content">上传内容</div>
			
			<UpLoadView></UpLoadView>
		</el-tab-pane>
		<el-tab-pane name="messages">
			<template #label>
				<span>
					<el-icon>
						<Message />
					</el-icon>
					<span>消息</span>
				</span>
			</template>
			<div class="tab-content">消息内容</div>
			 <MessageBoard />
		</el-tab-pane>
		<el-tab-pane name="profile">
			<template #label>
				<span>
					<el-icon>
						<User />
					</el-icon>
					<span>我</span>
				</span>
			</template>
			<div class="tab-content">我的内容</div>
			<ProfileView></ProfileView>
		</el-tab-pane>
	</el-tabs>
</template>

<script setup>
	import {
		ref
	} from 'vue'

	const activeTab = ref('home')
	import MainScreen from './mainScreen/MainScreen.vue';
	import UpLoadView from './upload/UpLoadView.vue';
	import MessageBoard from './message/MessageBoard.vue'
	import ProfileView from './me/ProfileView.vue';
</script>

<style>
	.el-tabs {
		border-radius: 6px
	}
</style>